<template>
    <div class="h-all flex-column pr-15 pl-15">
        <div class="pt-15">
            <el-input v-model="header"></el-input>
            <el-button size="mini">清除</el-button>
            <el-button type="primary" size="mini">查询</el-button>
        </div>
        <el-table :data="data" :height="10" class="flex-1 mb-10">
            <el-table-column label="名称" prop="name"></el-table-column>
            <el-table-column label="名称" prop="name"></el-table-column>
            <el-table-column label="名称" prop="name"></el-table-column>
            <el-table-column label="名称" prop="name"></el-table-column>
            <el-table-column label="名称" prop="name"></el-table-column>
        </el-table>
        <div class="ta-right pb-15">
            <el-pagination v-model:currentPage="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="sizeChange" @current-change="currentChange"></el-pagination>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
    setup() {
        const data = ref([
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
            { name: "123123" },
        ]);
        let header = ref(300);
        const headerset = () => {
            if (header.value === 500) {
                header.value = 300;
            } else {
                header.value = 500;
            }
        };
        const sizeChange = (v: number) => {
            console.log(v, "12312313");
        };
        const currentChange = (v: number) => {
            console.log(v, ";123123123123");
        };
        return {
            sizeChange,
            currentChange,
            total: data.value.length,
            currentPage: ref(1),
            data,
            header,
            headerset,
        };
    },
    mounted() {
        let laoutMain = document.getElementById("admin-laout__main");
        console.log(laoutMain?.clientHeight);
    },
});
</script>
